<template>
  <div class="log">
    <div class="button" @click="start"></div>
    <div class="info">电子与信息工程学院</div>

    <!-- <van-dialog
      v-model:show="show"
      title="用户验证"
      show-cancel-button
      @confirm="confirm"
    >
      <van-action-sheet v-model:show="typeShow" :actions="actions" @select="onSelect" />
      <van-cell-group>
        <van-field placeholder="请选择身份" v-model="identity" @focus="focus" />
      </van-cell-group>
      <van-cell-group v-if="type == 1">
        <van-field v-model="collegeName" placeholder="学院" />
        <van-field v-model="studentName" placeholder="姓名" />
      </van-cell-group>
      <van-cell-group v-if="type == 0">
        <van-field v-model="collegeName" placeholder="学院" />
        <van-field v-model="gradeName" placeholder="班级" />
        <van-field v-model="studentName" placeholder="姓名" />
        <van-field v-model="studentNo" placeholder="学号" />
      </van-cell-group>
      <van-loading type="spinner" color="#000" size="18px" vertical v-if="loadingShow"
        >加载中...</van-loading
      >
    </van-dialog> -->
  </div>
</template>

<script>
import { reactive, ref, toRefs } from "vue";
import { useRouter } from "vue-router";
import { userInfos } from "../../data/userInfo";
import { Notify, Toast } from "vant";
import { userLogin } from "../../network/axios";
// import { Toast } from "vant";
export default {
  name: "Logo",
  components: {},
  setup() {
    const router = useRouter();
    const show = ref(false);
    const typeShow = ref(false); // 身份类别选择显示
    const identity = ref("");
    const actions = ref([
      { name: "教职工", type: 1 },
      { name: "学生", type: 0 },
    ]);
    let userInfo = reactive({
      type: NaN,
      gradeName: "",
      collegeName: "",
      studentNo: "",
      studentName: "",
    });
    const loadingShow = ref(false);
    const start = () => {
      // show.value = true;
      Toast.loading({
        message: "即将答题",
        forbidClick: true,
      });
      setTimeout(() => {
        router.push({
          name: "Test",
        });
      }, 2000);
    };
    const focus = () => {
      typeShow.value = true;
    };
    const onSelect = (item) => {
      clearUserInfo();

      typeShow.value = false;
      userInfo.type = item.type;
      identity.value = item.name;
    };
    // 确认按钮
    const confirm = async () => {
      if (judgMent() === "") return;
      if (judgMent()) return Notify(`请填写${userInfos[judgMent()]}`);
      loadingShow.value = true;
      const {
        data: { code, info },
      } = await userLogin(userInfo);
      loadingShow.value = false;
      if (code === 200) {
        router.push({
          name: "Test",
          query: {
            userInfoIds: info,
          },
        });
      }
    };

    const judgMent = () => {
      const teacherJudgMent = ["collegeName", "studentName"];
      const studentJudgMent = ["collegeName", "gradeName", "studentName", "studentNo"];
      let emptyJud = "";
      switch (userInfo.type * 1) {
        case 0:
          emptyJud = studentJudgMent.find((item) => userInfo[item] == "");
          break;
        case 1:
          emptyJud = teacherJudgMent.find((item) => userInfo[item] == "");
          break;
      }
      return emptyJud;
    };

    const clearUserInfo = () => {
      userInfo.type = NaN;
      userInfo.gradeName = "";
      userInfo.collegeName = "";
      userInfo.studentNo = "";
      userInfo.studentName = "";
    };

    return {
      start,
      typeShow,
      show,
      confirm,
      focus,
      actions,
      identity,
      onSelect,
      ...toRefs(userInfo),
      loadingShow,
    };
  },
  methods: {
    getPath() {
      return 999;
    },
  },
};
</script>

<style lang="scss" scoped>
.log {
  width: 100%;
  height: 100%;
  background: url("../../assets/images/bg-cover.jpg") no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  // padding: 0.5rem;
  .button {
    width: 100%;
    height: 1.6rem;
    background: url("../../assets/images/btn-start.png") no-repeat center;
    background-size: 80% 80%;
  }
  .info {
    font-size: 0.5rem;
    color: #fdc172;
    text-align: center;
    margin: 0.5rem auto;
    font-weight: 600;
  }
}
</style>
